<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" :title="addEditName + title" :visible.sync="dialogVisible" width="50%"
        :before-close="handleClose">
        <el-form id="guide_form" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="选择品种" prop="plantVarietyId">
                <el-select v-model="ruleForm.plantVarietyId" class="w100p" filterable placeholder="请选择养殖品种"
                    @change="handleChangePlantVariety">
                    <el-option v-for="item, index in varietyList" :key="index" :label="item.plantVarietyName"
                        :value="item.plantVarietyId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="specificationName">
                <el-input v-model="ruleForm.specificationName" class="w100p" placeholder="请输入规格"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark" class="w100p" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm" id="guide_form_add">确 定</el-button>
        </span>
        <div class="guideBox" v-if="isGuide">
            <div class="routerInfo" :style="guideStyle"
                v-if="isGuide && guideInfo.index > 0 && guideInfo.procedure.length">
                <div class="guideText">{{ guideIndex + 1 }}. {{ guideInfo.procedure && guideInfo.procedure.length >
                    0 ?
                    guideInfo.procedure[guideIndex]
                    : '' }}</div>
                <div class="guideNext" @click="guideNext" v-if="guideInfo.procedure.length > (guideIndex + 1)">下一步
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import specificationManagement from '@/api/basicInformation/specificationManagement.js';
export default {
    components: {},
    computed: {
        guideInfo() {
            return this.$store.state.user.guideInfo;
        },
        isGuide() {
            return this.$store.state.user.isGuide || ''
        },
    },
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        varietyList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            guideIndex: 0,
            guideStyle: {},
            addEditName: '添加',
            addEditApi: specificationManagement.add,
            ruleForm: {},
            rules: {
                plantVarietyId: [
                    { required: true, message: '请选择品种', trigger: 'change' }
                ],
                specificationName: [
                    { required: true, message: '请输入规格', trigger: 'change' }
                ]
            }
        }
    },
    watch: {
        guideInfo: {
            handler(v) {
                this.setGuide(v)
                console.log(v)
            },
            deep: true
        },
        dialogVisible(v) {
            v && this.initData()
        }
    },
    mounted() { },
    methods: {
        handleChangePlantVariety() {
            let plantVarietyName = this.$public.foundObject(this.varietyList, 'plantVarietyId', this.ruleForm.plantVarietyId).plantVarietyName || '';
            this.$set(this.ruleForm, 'plantVarietyName', plantVarietyName)
            console.log(plantVarietyName)
        },
        initData() {
            if (this.addEditFlag == 'add') {
                this.resetForm()
                this.addEditApi = specificationManagement.add
                this.addEditName = '添加'
            } else if (this.addEditFlag == 'edit') {
                this.ruleForm = { ...this.data }
                this.addEditApi = specificationManagement.edit
                this.addEditName = '编辑'
            }
            setTimeout(() => {
                this.setGuide(this.guideInfo || {})
            }, 1000);
        },
        guideNext() {
            let { index, procedure } = this.guideInfo;
            this.$store.dispatch("user/getGuideInfo", {
                procedure: procedure,
                index: index + 1
            });
        },
        setGuide(v) {
            let { index } = v;
            this.guideIndex = index;
            let btn = document.getElementById('guide_form_add');
            let formDom = document.getElementById('guide_form');
            console.log(formDom, btn, index)
            this.resetGuide(formDom);
            this.resetGuide(btn);
            if (index == 2) {
                formDom.className += " guide-name";
                this.guideStyle = {
                    top: '12%',
                    right: '29%',
                    wayFlag: 'right'
                }
            } else if (index == 3) {
                btn.className += " guide-name";
                this.guideStyle = {
                    top: '42%',
                    right: '33%',
                    wayFlag: 'right'
                }
            } else {
                this.resetForm(); this.cancel()
            }
        },

        resetGuide(node) {
            node && (node.className = node.className.replace("guide-name", ""));
        },
        //提交表单
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.addEditApi(this.ruleForm).then(res => {
                        let msg = res.code == 1 ? '操作成功' : '操作失败'
                        this.$message[res.code == 1 ? 'success' : 'warning'](res.msg || msg)
                        res.code == 1 && this.cancel();
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.guideBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000030;
    z-index: 10;
}

.routerInfo {
    max-width: 400px;
    min-width: 300px;
    padding: 10px;
    background-color: #FF9243;
    color: #ffffff;
    position: fixed;
    z-index: 9999;

    .guideText {
        width: 100%;
        text-align: left;
        line-height: 26px;
    }

    .guideNext {
        width: 100px;
        margin-top: 15px;
        background-color: #e4a579;
        border: 1px solid #c65504;
        border-radius: 4px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;

        &:hover {
            background-color: #d88244;
        }
    }
}

::v-deep {

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        z-index: 0;
    }

    .el-checkbox__inner {
        z-index: 0;
    }
}

#guide_form {
    background-color: #ffffff;
}
</style>